<script setup lang="ts">
import type { VxeGridListeners, VxeGridProps } from "vxe-table";
import FlUpload from "@fl/components/fl-upload.vue";
import { ElLoading, ElMessage } from "element-plus";
import {
  dpStyleList,
  getPreviewInfo,
  ismainpage,
  uploadImg,
} from "@fl/api/flagship/flagship";

import Image from "./images.vue";
import Phone from "./phone.vue";

const route = useRoute();
interface formType {
  financeImage?: string;
  experienceMuseumPorcelainPicture?: string;
  reservationDrawing?: string;
}
const openImg = ref<boolean>(false);
const styleUpLoad = ref<boolean>(false);
const isLoading = ref<boolean>(true);
const previewForm = ref<any>({});
const form = ref<formType>({
  financeImage: "",
  experienceMuseumPorcelainPicture: "",
  reservationDrawing: "",
});
const formCopy = ref<formType>({
  financeImage: "",
  experienceMuseumPorcelainPicture: "",
  reservationDrawing: "",
});
// const lpbq = ref<any>([]) // 楼盘标签
const title = ref<string>("");
const sign = ref<string>("");
const id = ref<string>("");
const lpbq = ref<any>([]);
const activeModelName = ref<string>("first");
function updateForm(data: formType) {
  Object.assign(form.value, data);
  isLoading.value = false;
}
const gridOptions = reactive<VxeGridProps>({
  border: true,
  columnConfig: {
    resizable: true,
  },
  columns: [
    { field: "shopTemplateName", title: "模板名称" },
    {
      field: "financeImage",
      slots: { default: "financeImage" },
      title: "瓷片区图",
      minWidth: 420,
    },
    {
      field: "uploadImg",
      slots: { default: "uploadImg" },
      title: "上传图片",
      width: 80,
    },
    {
      field: "setAsHomeValue",
      slots: { default: "setAsHome" },
      title: "是否设为主页",
      width: 130,
    },
  ],
  data: [],
  editConfig: {
    mode: "row",
    showStatus: true,
    trigger: "manual",
  },
  height: 530,
  keepSource: true,
  loading: false,
  showOverflow: true,
});
// 分页器操作
const gridEvents: VxeGridListeners = {
  pageChange({ currentPage, pageSize }) {
    if (gridOptions.pagerConfig) {
      gridOptions.pagerConfig.currentPage = currentPage;
      gridOptions.pagerConfig.pageSize = pageSize;
    }

    // findList()
  },
};

function getTableList() {
  if (route.query.id) {
    gridOptions.loading = true;
    dpStyleList(route.query.id).then((res) => {
      gridOptions.loading = false;
      gridOptions.data = res.data;
      gridOptions.data &&
        gridOptions.data.forEach((element) => {
          console.log(element.setAsHome);

          if (element.setAsHome === 1) {
            element.setAsHomeValue = true;
          } else {
            element.setAsHomeValue = false;
          }
        });
    });
  }
}
onMounted(() => {
  getTableList();
});
function preview(id) {
  getPreviewInfo(id).then((response) => {
    console.log(response);

    lpbq.value = [];
    response.data.projectInfo.forEach((item, index) => {
      const arr = [];
      console.log(item.lpbq);

      // if (item.lpbq) {
      //   item.lpbq.split(",").forEach((v) => {
      //     arr.push(v);
      //   });
      // }
      arr.length = 2;
      response.data.projectInfo[index].lpbq = arr;
      previewForm.value = response.data;
    });
    previewForm.value = response.data;
    console.log(previewForm.value);
  });
}
function showImg(type) {
  gridOptions.data?.forEach((item) => {
    // item.shopTemplateName
    if (item.shopTemplateName === "模板样式一" && type === "first") {
      preview(item.id);
      console.log("模板样式一");
    } else if (item.shopTemplateName === "模板样式二" && type === "second") {
      preview(item.id);
      console.log("模板样式二");
    } else if (item.shopTemplateName === "模板样式三" && type === "third") {
      preview(item.id);
      console.log("模板样式三");
    }
  });
  openImg.value = true;
  title.value = "样式预览";
  sign.value = type;
}
function switchSingleChang(row) {
  ismainpage(row.id).then(() => {
    getTableList();
  });
}
function uploadchang(row) {
  form.value.reservationDrawing = row.reservationDrawing || "";
  formCopy.value.reservationDrawing = row.reservationDrawing || "";
  form.value.experienceMuseumPorcelainPicture =
    row.experienceMuseumPorcelainPicture || "";
  formCopy.value.experienceMuseumPorcelainPicture =
    row.experienceMuseumPorcelainPicture || "";
  form.value.financeImage = row.financeImage || "";
  formCopy.value.financeImage = row.financeImage || "";
  id.value = row.id;
  isLoading.value = false;
  styleUpLoad.value = true;
}
function saveStyleEvent() {
  if (!form.value.reservationDrawing) {
    ElMessage.warning("属预约服务瓷片封面图为空将使用默认图片！");
    form.value.reservationDrawing=formCopy.value.reservationDrawing
  }
  if (!form.value.experienceMuseumPorcelainPicture) {
    ElMessage.warning("线上体验馆瓷片封面图为空将使用默认图片！");
    form.value.experienceMuseumPorcelainPicture=formCopy.value.experienceMuseumPorcelainPicture
  }
  if (!form.value.financeImage) {
    form.value.financeImage=formCopy.value.financeImage
    ElMessage.warning("金融服务瓷片封面图为空将使用默认图片！");
  }
  const obj = {
    id: id.value,
    ...form.value
  };
  
  uploadImg(obj).then((res) => {
    console.log(res);
    styleUpLoad.value = false;
    getTableList();
  });
}
</script>

<template>
  <el-row :gutter="20">
    <el-col :span="6" style="background: #f7f8fa">
      <div class="app-tabs">
        <el-tabs
          v-model="activeModelName"
          type="card"
          class="demo-tabs"
          @tab-click="handleTempClick"
        >
          <el-tab-pane label="样式一" name="first">
            <img
              src="@/assets/images/template/template1.png"
              style="display: block; max-width: 100%; height: 600px; margin-left: 6px"
            />
          </el-tab-pane>

          <el-tab-pane label="样式二" name="second">
            <img
              src="@/assets/images/template/template2.png"
              style="display: block; max-width: 100%; height: 600px; margin-left: 6px"
            />
          </el-tab-pane>

          <el-tab-pane label="样式三" name="third">
            <img
              src="@/assets/images/template/template3.png"
              style="display: block; max-width: 100%; height: 600px; margin-left: 100px"
            />
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-col>

    <el-col :span="18">
      <div class="p-but">
        <el-button type="primary" @click="showImg(activeModelName)"> 预览 </el-button>
      </div>

      <vxe-grid v-bind="gridOptions" v-on="gridEvents">
        <template #financeImage="{ row }">
          <Image v-if="row.financeImage" :url="row.financeImage" />

          <Image
            v-if="row.experienceMuseumPorcelainPicture"
            :url="row.experienceMuseumPorcelainPicture"
          />

          <Image v-if="row.reservationDrawing" :url="row.reservationDrawing" />
        </template>

        <template #uploadImg="{ row }">
          <el-text type="primary" style="cursor: pointer" @click="uploadchang(row)"
            >上传</el-text
          >
        </template>
        <template #setAsHome="{ row }">
          <vxe-switch v-model="row.setAsHomeValue" @change="switchSingleChang(row)" />
        </template>
      </vxe-grid>
    </el-col>
  </el-row>
  <!-- 模板图片预览弹框 -->
  <Phone
    v-model:phoneStatus="openImg"
    :phone-title="title"
    :data="previewForm"
    width="400px"
  >
    <template #conts>
      <!-- 样式一 -->
      <div v-show="sign === 'first'" class="template-img">
        <el-scrollbar>
          <div class="top" style="height: 150px">
            <el-image :src="previewForm.shopTopMap" />

            <p
              class="top-logo"
              style="
                width: 150px;
                height: 25px;
                background-color: black;
                position: relative;
                bottom: 70px;
                left: 80px;
                opacity: 0.6;
              "
            >
              <el-image
                src="https://www.whucg.cn/themes/simpleboot3/public/assets/images/index/logo_1.png"
              />
            </p>
          </div>

          <div
            class="map"
            style="
              margin: 0 10px;
              height: 125px;
              background-color: white;
              position: relative;
              bottom: 17px;
              border-radius: 2px;
            "
          >
            <p style="color: black; font-weight: bold; padding: 10px; font-size: 12px">
              地图找房
            </p>

            <el-image
              src="https://5b0988e595225.cdn.sohucs.com/images/20180612/a328d1e105ce40b28548450c78c832d8.jpg"
              style="width: 100%; height: 93px; padding: 0 10px 10px"
            />
          </div>

          <div
            class="loupan"
            style="
              height: 260px;
              background-color: white;
              margin: 0 5px;
              border-radius: 5px;
            "
          >
            <el-carousel indicator-position="none" height="260px" :autoplay="false">
              <el-carousel-item v-for="item in previewForm.projectInfo" :key="item">
                <div
                  class="loupan-top"
                  style="position: relative; width: 295px; height: 170px"
                >
                  <el-image :src="item.logo" style="width: 100%; height: 100%" />

                  <div
                    class="top-logo"
                    style="
                      width: 290px;
                      height: 25px;
                      position: absolute;
                      bottom: 8px;
                      display: flex;
                      flex-direction: row;
                      justify-content: space-between;
                    "
                  >
                    <p>
                      <el-image
                        src="https://www.whucg.cn/themes/simpleboot3/public/assets/images/index/logo_1.png"
                        style="
                          margin-left: 7px;
                          width: 90px;
                          height: 100%;
                          background-color: #000000;
                        "
                      />
                    </p>

                    <p
                      style="
                        display: flex;
                        flex-direction: row;
                        width: 125px;
                        height: 13px;
                        margin-top: 11px;
                        overflow: hidden; ;
                      "
                    >
                      <span
                        v-for="bq in item.lpbq"
                        :key="bq"
                        style="
                          background-color: white;
                          font-size: 9px;
                          padding: 0 2px;
                          margin: 0 3px;
                          text-align: center;
                          line-height: 15px;
                          color: #409eff;
                          border-radius: 2px;
                        "
                        >{{ bq }}</span
                      >
                    </p>
                  </div>
                </div>

                <div class="loupan-bottom" style="height: 70px; margin: 10px">
                  <p style="margin-bottom: 10px; display: flex">
                    <span
                      style="
                        margin-right: 10px;
                        background-color: #ffeff0;
                        height: 15px;
                        width: 30px;
                        line-height: 13px;
                        text-align: center;
                      "
                    >
                      <a style="font-size: 11px; color: #da0103; border-radius: 5px"
                        >在售</a
                      >
                    </span>

                    <span style="font-size: 15px; font-weight: bold; color: #000000">{{
                      item.xsmc
                    }}</span>
                  </p>

                  <p style="margin-bottom: 10px; color: #a9a4a4; font-size: 12px">
                    {{ item.areaId }} {{ item.address }} {{ item.wylx }}
                    {{ item.jzmjMin }}-{{ item.jzmjMax }}㎡
                  </p>

                  <p style="margin-bottom: 10px; color: #da0103">{{ item.xsjg }}元/㎡</p>
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>

          <div class="mbStyle" style="margin-top: 10px">
            <ul
              style="
                display: flex;
                justify-content: space-evenly;
                height: 135px;
                width: 300px;
              "
            >
              <li style="position: relative; width: 95px">
                <el-image
                  :src="previewForm.financeImage"
                  style="width: 100%; height: 100%; border-radius: 5px"
                />

                <span
                  style="
                    background: linear-gradient(rgba(255, 255, 255, 0), rgb(0, 0, 0));
                    position: relative;
                    bottom: 44px;
                    display: inline-block;
                    width: 100%;
                    border-radius: 5px;
                    height: 42px;
                    color: rgb(231, 224, 224);
                    font-size: 13px;
                    line-height: 45px;
                    padding: 5px;
                  "
                  >金融服务</span
                >
              </li>

              <li style="position: relative; width: 95px">
                <el-image
                  :src="previewForm.reservationDrawing"
                  style="width: 100%; height: 100%; border-radius: 5px"
                />
                <span
                  style="
                    background: linear-gradient(rgba(255, 255, 255, 0), rgb(0, 0, 0));
                    position: relative;
                    bottom: 44px;
                    display: inline-block;
                    width: 100%;
                    border-radius: 5px;
                    height: 42px;
                    color: rgb(231, 224, 224);
                    font-size: 13px;
                    line-height: 45px;
                    padding: 5px;
                  "
                  >专属预约服务</span
                >
              </li>

              <li style="position: relative; width: 95px">
                <el-image
                  :src="previewForm.experienceMuseumPorcelainPicture"
                  style="width: 100%; height: 100%; border-radius: 5px"
                />

                <span
                  style="
                    background: linear-gradient(rgba(255, 255, 255, 0), rgb(0, 0, 0));
                    position: relative;
                    bottom: 44px;
                    display: inline-block;
                    width: 100%;
                    border-radius: 5px;
                    height: 42px;
                    color: rgb(231, 224, 224);
                    font-size: 13px;
                    line-height: 45px;
                    padding: 5px;
                  "
                  >线上体验馆</span
                >
              </li>
            </ul>
          </div>

          <div
            class="zxzx"
            style="height: 100%; background-color: white; margin: 5px; border-radius: 5px"
          >
            <p style="padding: 15px 10px">
              <span style="font-weight: bold; color: black; font-size: 15px"
                >最新资讯</span
              >

              <span
                style="
                  float: right;
                  float: right;
                  color: #a9b0b7;
                  font-size: 12px;
                  margin-top: 3px;
                "
                >查看更多></span
              >
            </p>

            <ul style="display: flex; justify-content: flex-start">
              <li
                v-for="item in previewForm.shopMsgNew"
                :key="item.msgCover"
                style="margin: 0 5px; width: 140px"
              >
                <el-image
                  :src="item.msgCover"
                  style="width: 100%; height: 85px; border-radius: 5px"
                />

                <span style="line-height: 18px"
                  ><a
                    style="
                      display: -webkit-box;
                      text-overflow: ellipsis;
                      overflow: hidden;
                      width: 115px;
                      -webkit-box-orient: vertical;
                      -webkit-line-clamp: 2;
                    "
                    >{{ item.msgTitle }}</a
                  ></span
                >
              </li>
            </ul>
          </div>

          <div
            class="rmhd"
            style="height: 100%; background-color: white; margin: 5px; border-radius: 5px"
          >
            <p style="padding: 15px 10px">
              <span style="font-weight: bold; color: black; font-size: 15px"
                >热门活动</span
              >

              <span
                style="
                  float: right;
                  float: right;
                  color: #a9b0b7;
                  font-size: 12px;
                  margin-top: 3px;
                "
                >查看更多></span
              >
            </p>

            <ul style="display: flex; justify-content: flex-start">
              <li
                v-for="item in previewForm.shopMsgHot"
                :key="item.msgCover"
                style="width: 140px; margin: 0 5px"
              >
                <el-image
                  :src="item.msgCover"
                  style="width: 100%; height: 85px; border-radius: 5px"
                />

                <span style="line-height: 18px"
                  ><a
                    style="
                      display: -webkit-box;
                      text-overflow: ellipsis;
                      overflow: hidden;
                      width: 115px;
                      -webkit-box-orient: vertical;
                      -webkit-line-clamp: 2;
                    "
                    >{{ item.msgTitle }}</a
                  ></span
                >
              </li>
            </ul>
          </div>
        </el-scrollbar>
      </div>

      <!-- 样式二 -->
      <div v-show="sign === 'second'" class="template-img">
        <el-scrollbar>
          <div class="loupan" style="height: 360px; margin: 0 5px; border-radius: 5px">
            <el-carousel height="360px" :autoplay="false">
              <el-carousel-item v-for="item in previewForm.projectInfo" :key="item">
                <div class="loupan-top" style="position: relative; height: 100%">
                  <el-image :src="item.logo" style="width: 100%; height: 100%" />

                  <div
                    class="top-logo"
                    style="
                      margin-left: 15px;
                      color: white;
                      height: 35px;
                      position: absolute;
                      bottom: 25px;
                      display: flex;
                      flex-direction: column;
                      justify-content: space-between;
                    "
                  >
                    <p style="font-size: 15px">
                      {{ item.xsmc }}
                    </p>

                    <p style="color: #e5e5e5; font-size: 12px">
                      <span v-for="bq in item.lpbq" :key="bq">{{ `${bq} ` }}</span>

                      | <span>{{ item.jzmjMin }}-{{ item.jzmjMax }}㎡</span>
                    </p>
                  </div>
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>

          <div
            class="map"
            style="height: 170px; background-color: white; border-radius: 2px"
          >
            <p
              style="color: black; font-weight: bold; padding: 15px 10px; font-size: 12px"
            >
              地图找房
            </p>

            <el-image
              src="https://5b0988e595225.cdn.sohucs.com/images/20180612/a328d1e105ce40b28548450c78c832d8.jpg"
              style="width: 100%; height: 75%; padding: 0 10px 10px"
            />
          </div>

          <div class="mbStyle" style="height: 150px">
            <el-scrollbar height="200px">
              <p
                style="
                  color: black;
                  font-weight: bold;
                  padding: 15px 10px;
                  font-size: 14px;
                "
              >
                尊享服务
              </p>

              <ul style="display: flex; flex-direction: row; width: 450px; height: 100px">
                <li style="position: relative; width: 140px; margin: 0 5px">
                  <el-image
                    :src="previewForm.financeImage"
                    style="width: 100%; height: 100%; border-radius: 5px"
                  />

                  <span
                    style="
                      background: linear-gradient(rgba(255, 255, 255, 0), rgb(0, 0, 0));
                      position: relative;
                      bottom: 44px;
                      display: inline-block;
                      width: 100%;
                      border-radius: 5px;
                      height: 42px;
                      color: rgb(231, 224, 224);
                      font-size: 13px;
                      line-height: 45px;
                      padding: 5px;
                    "
                    >金融服务</span
                  >
                </li>

                <li style="position: relative; width: 140px; margin: 0 5px">
                  <el-image
                    :src="previewForm.reservationDrawing"
                    style="width: 100%; height: 100%; border-radius: 5px"
                  />

                  <span
                    style="
                      background: linear-gradient(rgba(255, 255, 255, 0), rgb(0, 0, 0));
                      position: relative;
                      bottom: 44px;
                      display: inline-block;
                      width: 100%;
                      border-radius: 5px;
                      height: 42px;
                      color: rgb(231, 224, 224);
                      font-size: 13px;
                      line-height: 45px;
                      padding: 5px;
                    "
                    >专属预约服务</span
                  >
                </li>

                <li style="position: relative; width: 140px; margin: 0 5px">
                  <el-image
                    :src="previewForm.experienceMuseumPorcelainPicture"
                    style="width: 100%; height: 100%; border-radius: 5px"
                  />

                  <span
                    style="
                      background: linear-gradient(rgba(255, 255, 255, 0), rgb(0, 0, 0));
                      position: relative;
                      bottom: 44px;
                      display: inline-block;
                      width: 100%;
                      border-radius: 5px;
                      height: 42px;
                      color: rgb(231, 224, 224);
                      font-size: 13px;
                      line-height: 45px;
                      padding: 5px;
                    "
                    >线上体验馆</span
                  >
                </li>
              </ul>
            </el-scrollbar>
          </div>

          <div
            class="zxzx"
            style="height: 100%; background-color: white; margin: 5px; border-radius: 5px"
          >
            <p style="padding: 15px 10px">
              <span style="font-weight: bold; color: black; font-size: 15px"
                >最新资讯</span
              >

              <span style="float: right"
                ><el-icon><arrow-right /></el-icon
              ></span>
            </p>

            <ul style="display: flex; justify-content: flex-start">
              <li
                v-for="item in previewForm.shopMsgNew"
                :key="item.msgCover"
                style="margin: 0 5px; width: 140px"
              >
                <el-image
                  :src="item.msgCover"
                  style="width: 100%; height: 85px; border-radius: 5px"
                />

                <span style="line-height: 18px"
                  ><a
                    style="
                      display: -webkit-box;
                      text-overflow: ellipsis;
                      overflow: hidden;
                      width: 115px;
                      -webkit-box-orient: vertical;
                      -webkit-line-clamp: 2;
                    "
                    >{{ item.msgTitle }}</a
                  ></span
                >
              </li>
            </ul>
          </div>

          <div
            class="rmhd"
            style="height: 100%; background-color: white; margin: 5px; border-radius: 5px"
          >
            <p style="padding: 15px 10px">
              <span style="font-weight: bold; color: black; font-size: 15px"
                >热门活动</span
              >

              <span style="float: right"
                ><el-icon><arrow-right /></el-icon
              ></span>
            </p>

            <ul style="display: flex; justify-content: flex-start">
              <li
                v-for="item in previewForm.shopMsgHot"
                :key="item.msgCover"
                style="width: 140px; margin: 0 5px"
              >
                <el-image
                  :src="item.msgCover"
                  style="width: 100%; height: 85px; border-radius: 5px"
                />

                <span style="line-height: 18px"
                  ><a
                    style="
                      display: -webkit-box;
                      text-overflow: ellipsis;
                      overflow: hidden;
                      width: 115px;
                      -webkit-box-orient: vertical;
                      -webkit-line-clamp: 2;
                    "
                    >{{ item.msgTitle }}</a
                  ></span
                >
              </li>
            </ul>
          </div>
        </el-scrollbar>
      </div>

      <!-- 样式三 -->
      <div
        v-show="sign === 'third'"
        class="template-img"
        style="background-color: #1d2129; padding: 0 10px"
      >
        <el-scrollbar>
          <div class="map" style="height: 300px; border-radius: 2px">
            <p style="width: 50%; margin: 7px 0">
              <el-image
                src="https://www.whucg.cn/themes/simpleboot3/public/assets/images/index/logo_1.png"
              />
            </p>

            <div style="background-color: black; height: 250px; border-radius: 5px">
              <el-image
                src="https://5b0988e595225.cdn.sohucs.com/images/20180612/a328d1e105ce40b28548450c78c832d8.jpg"
                style="height: 70%; width: 100%"
              />

              <p style="padding: 10px; color: #d7d7d7">城建楼盘地图</p>

              <p style="padding: 10px; color: #d7d7d7; font-size: 11px">
                醉里挑灯看剑，梦回吹角连营
              </p>
            </div>
          </div>

          <div class="loupan" style="height: 360px; border-radius: 5px">
            <el-carousel height="360px" indicator-position="none" :autoplay="false">
              <el-carousel-item v-for="item in previewForm.projectInfo" :key="item">
                <div class="loupan-top" style="position: relative; height: 100%">
                  <el-image :src="item.logo" style="width: 100%; height: 100%" />

                  <div
                    class="top-logo"
                    style="
                      margin-left: 15px;
                      color: white;
                      width: 90%;
                      height: 80px;
                      position: absolute;
                      bottom: 10px;
                      display: flex;
                      flex-direction: column;
                      justify-content: space-between;
                    "
                  >
                    <p style="font-size: 15px">
                      {{ item.xsmc }}
                    </p>

                    <p style="color: #e5e5e5; font-size: 12px">
                      <span v-for="bq in item.lpbq" :key="bq">{{ `${bq} ` }}</span>

                      | <span>{{ item.jzmjMin }}-{{ item.jzmjMax }}㎡</span>
                    </p>

                    <el-button style="background-color: transparent; color: white">
                      查看详情
                    </el-button>
                  </div>
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>

          <div class="mbStyle" style="height: 150px; margin-top: 20px">
            <el-scrollbar height="200px">
              <ul style="display: flex; flex-direction: row; width: 855px; height: 145px">
                <li style="position: relative; width: 275px; margin: 0 5px">
                  <el-image
                    :src="previewForm.financeImage"
                    style="width: 100%; height: 100%; border-radius: 5px"
                  />

                  <span
                    style="
                      background: linear-gradient(rgba(255, 255, 255, 0), rgb(0, 0, 0));
                      position: relative;
                      bottom: 44px;
                      display: inline-block;
                      width: 100%;
                      border-radius: 5px;
                      height: 42px;
                      color: rgb(231, 224, 224);
                      font-size: 13px;
                      line-height: 45px;
                      padding: 5px;
                    "
                    >金融服务</span
                  >
                </li>

                <li style="position: relative; width: 275px; margin: 0 5px">
                  <el-image
                    :src="previewForm.reservationDrawing"
                    style="width: 100%; height: 100%; border-radius: 5px"
                  />

                  <span
                    style="
                      background: linear-gradient(rgba(255, 255, 255, 0), rgb(0, 0, 0));
                      position: relative;
                      bottom: 44px;
                      display: inline-block;
                      width: 100%;
                      border-radius: 5px;
                      height: 42px;
                      color: rgb(231, 224, 224);
                      font-size: 13px;
                      line-height: 45px;
                      padding: 5px;
                    "
                    >专属预约服务</span
                  >
                </li>

                <li style="position: relative; width: 275px; margin: 0 5px">
                  <el-image
                    :src="previewForm.experienceMuseumPorcelainPicture"
                    style="width: 100%; height: 100%; border-radius: 5px"
                  />

                  <span
                    style="
                      background: linear-gradient(rgba(255, 255, 255, 0), rgb(0, 0, 0));
                      position: relative;
                      bottom: 44px;
                      display: inline-block;
                      width: 100%;
                      border-radius: 5px;
                      height: 42px;
                      color: rgb(231, 224, 224);
                      font-size: 13px;
                      line-height: 45px;
                      padding: 5px;
                    "
                    >线上体验馆</span
                  >
                </li>
              </ul>
            </el-scrollbar>
          </div>

          <div
            class="zxzx"
            style="height: 100%; color: white; margin: 5px; border-radius: 5px"
          >
            <p style="padding: 15px 10px">
              <span style="font-weight: bold; font-size: 15px">最新资讯</span>

              <span style="float: right"
                ><el-icon><arrow-right /></el-icon
              ></span>
            </p>

            <ul style="display: flex; justify-content: flex-start">
              <li
                v-for="item in previewForm.shopMsgNew"
                :key="item.msgCover"
                style="margin: 0 5px; width: 125px"
              >
                <el-image
                  :src="item.msgCover"
                  style="width: 100%; height: 85px; border-radius: 5px"
                />

                <span style="line-height: 18px"
                  ><a
                    style="
                      display: -webkit-box;
                      text-overflow: ellipsis;
                      overflow: hidden;
                      width: 115px;
                      -webkit-box-orient: vertical;
                      -webkit-line-clamp: 2;
                    "
                    >{{ item.msgTitle }}</a
                  ></span
                >
              </li>
            </ul>
          </div>

          <div
            class="rmhd"
            style="height: 100%; color: white; margin: 5px; border-radius: 5px"
          >
            <p style="padding: 15px 10px">
              <span style="font-weight: bold; font-size: 15px">热门活动</span>

              <span style="float: right"
                ><el-icon><arrow-right /></el-icon
              ></span>
            </p>

            <ul style="display: flex; justify-content: flex-start">
              <li
                v-for="item in previewForm.shopMsgHot"
                :key="item.msgCover"
                style="width: 140px; margin: 0 5px"
              >
                <el-image
                  :src="item.msgCover"
                  style="width: 100%; height: 85px; border-radius: 5px"
                />

                <span style="line-height: 18px"
                  ><a
                    style="
                      display: -webkit-box;
                      text-overflow: ellipsis;
                      overflow: hidden;
                      width: 115px;
                      -webkit-box-orient: vertical;
                      -webkit-line-clamp: 2;
                    "
                    >{{ item.msgTitle }}</a
                  ></span
                >
              </li>
            </ul>
          </div>
        </el-scrollbar>
      </div>
    </template>
  </Phone>
  <el-dialog
    v-model="styleUpLoad"
    v-if="styleUpLoad"
    width="50%"
    title="模板样式——上传图片"
    @close="styleUpLoad = false"
  >
    <el-skeleton v-if="isLoading" />
    <div class="formDiv" v-else>
      <el-form :model="form" ref="zxshRef" class="demo-ruleForm" status-icon>
        <div class="tips" v-if="templatePattern === '模板样式一'">
          *支持一张上传，建议336*504px
        </div>
        <div class="tips" v-else-if="templatePattern === '模板样式二'">
          *支持一张上传，建议513*360px
        </div>
        <div class="tips" v-else-if="templatePattern === '模板样式三'">
          *支持一张上传，建议900*555px
        </div>
        <el-row>
          <el-col :span="8">
            <el-form-item>
              <template #label>
                <div style="margin: auto">金融服务瓷片封面图：</div>
              </template>
              <div style="margin: auto">
                <FlUpload style="margin: auto" v-model="form.financeImage" />
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item>
              <template #label>
                <div style="margin: auto">线上体验馆瓷片封面图：</div>
              </template>
              <div style="margin: auto">
                <FlUpload v-model="form.experienceMuseumPorcelainPicture" />
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item>
              <template #label>
                <div style="margin: auto">专属预约服务瓷片封面图：</div>
              </template>
              <div style="margin: auto">
                <FlUpload v-model="form.reservationDrawing" />
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="styleUpLoad = false">取消</el-button>
        <el-button type="primary" @click="saveStyleEvent">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="less" scoped>
.p-but {
  display: flex;
  justify-content: end;
  margin: 0 0 10px 0;
}
:deep(.el-carousel__indicators--horizontal) {
  right: -55px;
  left: 78%;
  bottom: 0;
  transform: translateX(-50%);
}

:deep(.app-tabs) {
  .el-tabs__item {
    width: 100px;
  }
}

:deep(.el-row) {
  justify-content: space-evenly;

  .el-form-item__label {
    margin-bottom: 10px;
  }

  .el-form-item__content {
    justify-content: space-around;
  }
}

.tips {
  margin-left: 70px;
  height: 40px;
  line-height: 35px;
}

.el-form-item {
  flex-direction: column;
}

.p-but {
  display: flex;
  justify-content: end;
  margin: 0 0 10px 0;
}

.template-img {
  background-color: #f8f8f9;
  height: 100%;
  width: 97%;
  margin: 0 5px;
}

.title {
  margin-top: 20px;
  margin-bottom: 20px;
}

.pagination-container {
  margin-bottom: 30px;
}

.img-box {
  display: flex;
  justify-content: space-between;
}

.avatar-uploader {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}

.avatar {
  display: block;
  width: 180px;
  height: 130px;
}

.f-tips {
  color: #f60808;
  margin: 0px 0 20px 10px;
}

.s-tips {
  margin: 0 0 20px 30px;
}

.formDiv {
  height: 400px;
}
</style>
